<template>
  <div class="main-content" style="width: 50%">
    <div style="display: flex">
      <div @click="loadSectionPosts(null)"  class="card" :class="{'section-active' : data.activeSectionId === null}" style="padding: 10px 20px;margin-right: 20px;cursor: pointer" >全部版块</div>
      <div @click="loadSectionPosts(item.id)" :class="{'section-active' : data.activeSectionId === item.id}" class="card" style="padding: 10px 20px;margin-right: 20px;cursor: pointer" v-for="item in data.sectionList" :key="item.id">{{item.name}}</div>
    </div>

    <div style="margin: 15px 0">
      <div class="card" style="padding: 20px;margin-bottom: 10px" v-for="(item,index) in data.tableData" :key="item.id">
        <div style="margin-bottom: 10px;font-size: 20px" class="title" @click="goPage('/front/postsDetail?id='+item.id)">
          <img src="@/assets/img/hot.png" style="width: 20px ;position: relative;top: 2px"  v-if="index<3">
          {{item.title}}
        </div>
        <div>
          <el-tag style="margin-right: 5px;" type="primary" v-for="tag in JSON.parse(item.tags)" :key="tag">{{tag}}</el-tag>
        </div>
        <div style="display: flex;align-items: center;grid-gap: 20px;color: #666" >
          <div   style="flex: 1" >
            <div  class="line2" v-html="item.simpleContent"></div>
          </div>
            <img :src="item.img" style="width: 100px;height: 80px">
        </div>
        <div style="color: #666">
          <span style="margin-right: 20px">发布人：<span style="color: #333">{{item.userName}}</span></span>
          <span style="margin-right: 20px">发布时间：<span style="color: #333">{{item.time}}</span></span>
          <span >发布人：<span style="color: #333">{{item.readCount}}</span></span>
        </div>
      </div>
    </div>

    <div>
      <div class="card" v-if="data.total">
        <el-pagination  @current-change="load" layout="prev,pager,next" background :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
      </div>
    </div>
  </div>
</template>

<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";

const data=reactive({
  sectionList:[],
  activeSectionId:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
})
request.get('/postsSection/selectAll').then(res=>{
  data.sectionList=res.data
})
const loadSectionPosts = (postsId) => {
  data.activeSectionId=postsId
  load()
}
const load = () =>{
  request.get('/posts/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      sectionId:data.activeSectionId
    }
  }).then(res=>{
    if(res.code === "200"){
      data.tableData=res.data?.list || []
      data.total=res.data?.total
    }
  })
}
const goPage = (path) => {
  location.href = path
}
load()

</script>
<style scoped>
.section-active{
  background-color: #1890ff;
  color: white;
}
</style>